<template>
<d2-container>
  <el-card class="carousel" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
        <el-form-item label="状态" >
        <el-select v-model="queryData.state" filterable>
          <el-option label="全部" value="" />
          <el-option label="正常" value="0" />
          <el-option label="删除" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
          <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
        <el-button type="primary" @click="addHandler">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="pass" label="口令名称" />
      <el-table-column prop="url" label="链接" />
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1" type="warning">删除</el-tag>
          <el-tag v-else>正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dateline" label="添加时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="margin-right:10px" @click="editHandler(scope.row)">编辑</el-button>
          <el-popconfirm
            :title="`您确定${(scope.row.state ? '恢复正常' : '删除')}？`"
            @onConfirm="toggleHandler(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">{{ scope.row.state ? '正常' : '删除' }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="pagination.total" @current-change="changeHandler" />
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" label-width="120px" width="600px">
      <el-form ref="form" :model="formData" label-width="120px" width="50%">
        <el-form-item label="口令名称：" prop="pass">
          <el-input v-model="formData.pass" placeholder="请输入口令名称" />
        </el-form-item>
        <el-form-item label="链接：" prop="url">
          <el-input v-model="formData.url" placeholder="请输入链接" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import { GetList, specialUpdate, specialEdit } from '@/api/appoint' // 查询添加修改删除的http请求接口
export default {
  name: 'page2',
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  data () {
    return {
      queryData: {
        state: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogFormVisible: false,
      dialogFormTitle: '',
      formData: {
        id: '',
        pass: '',
        url: ''
      },
      tableLoading: false,
      submitLoading: false
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      const { pagination, queryData } = this
      const { state } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, state).then(res => {
        const { _data = [], pagination, typeArr } = res || {}
        this.tableData = _data
        pagination && (this.pagination = pagination)
        typeArr && (this.typeArr = typeArr)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    queryHandler () {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    changeHandler (current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    addHandler () {
      this.dialogFormTitle = '添加'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    resetForm () {
      delete this.formData.id
      this.$refs.form.resetFields()
    },
    editHandler(row) {
      this.dialogFormTitle = `编辑`
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.formData = { ...row }
      })
    },
    submitHandler () {
      const { formData } = this
      this.submitLoading = true
      specialEdit({ ...formData }).then(res => {
        this._getTableData()
        this.dialogFormVisible = false
      }).finally(() => {
        this.submitLoading = false
      })
    },
    toggleHandler (row) {
      const data = Object.assign({}, row)
      data.state = Math.pow(0, row.state)
      this.formData = data
      this._stateCarouselList()
    },
    _stateCarouselList () {
      const { formData } = this
      this.submitLoading = true
      specialUpdate({ ...formData }).then(res => {
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>
<style>
.imgbox{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.imgitem{
  margin-right: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: cover;
}
.logimg{
  width: 160px;
  height: 160px;
  background-size: cover;
}

</style>
